<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"/>
        <link rel="shortcut icon" type="image/png" href="../img/favicon.png">
        <title></title>

        

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<link href="//fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet">
<link rel="stylesheet" href="../css/main.css">
        <link rel="stylesheet" href="../css/jsplumb-doc.css">

    </head>
    <body>
        <div class="navbar navbar-top navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>

            <a class="navbar-brand" href="/"><img src="../../img/logo-medium-jsplumb.png"></a>
            <div class="community"></div>

        </div>

        <div class="navbar-collapse collapse nav-wrapper">
            <ul class="nav navbar-nav">
                <li><a href="../">DEMOS</a></li>
                <li><a href="../doc/home.html">DOCS</a></li>
                <li><a href="../apidocs/index.html">API</a></li>
                <li><a href="../download">DOWNLOAD</a></li>
                <li><a href="http://beta.jsplumbtoolkit.com/contact.html">CONTACT</a></li>
                <li><a href="https://blog.jsplumbtoolkit.com">BLOG</a></li>

            </ul>

            <div class="social-nav hidden-xs">
                <a href="http://twitter.com/jsplumblib" class="link"><span class="icon-twitter"></span></a>
                <a href="http://github.com/sporritt/jsplumb/" class="link"><span class="icon-github"></span></a>
                <a href="http://www.linkedin.com/company/jsplumb" class="link"><span class="icon-linkedin"></span></a>

            </div>
        </div><!--/.nav-collapse -->
    </div>
</div>

        <div class="container padding-top">
            <div class="row" id="docs">
                <div class="docs-nav col-xs-3" tabindex="0">
                    <ul>
<li><a href="changelog.html">Changelog</a></li>
<li>Required imports and basic setup<ul>
<li><a href="home.html#browser">Browser Compatibility</a></li>
<li><a href="home.html#setup">Setup</a></li>
<li><a href="home.html#doctype">Doctype</a></li>
<li><a href="home.html#imports">Required Imports</a></li>
<li><a href="home.html#initializing">Initializing jsPlumb</a></li>
<li><a href="home.html#multiple">Multiple jsPlumb Instances</a></li>
<li><a href="home.html#zindex">Z-Index Considerations</a></li>
<li><a href="home.html#container">Where does jsPlumb add elements?</a></li>
<li><a href="home.html#dragging">Element Dragging</a></li>
<li><a href="home.html#performance">Performance</a></li>
<li><a href="zooming.html">Zooming</a></li>
</ul>
</li>
<li><a href="defaults.html">Configuring Defaults</a></li>
<li><a href="basic-concepts.html">Basic Concepts</a><ul>
<li><a href="anchors.html">Anchors</a></li>
<li><a href="connectors.html">Connectors</a></li>
<li><a href="endpoints.html">Endpoints</a></li>
<li><a href="overlays.html">Overlays</a></li>
</ul>
</li>
<li><a href="connections.html">Establishing Connections</a><ul>
<li><a href="connections.html#programmatic">Programmatic Connections</a></li>
<li><a href="connections.html#common">Reusing Common Settings</a></li>
<li><a href="connections.html#detaching">Detaching Programmatic Connections</a></li>
<li><a href="connections.html#draganddrop">Drag and Drop Connections</a></li>
<li><a href="connections.html#sourcesandtargets">Elements as sources &amp; targets</a></li>
<li><a href="connections.html#maketarget">Element Targets</a></li>
<li><a href="connections.html#makesource">Element Sources</a></li>
<li><a href="connections.html#sourcefilter">Specifying drag source area</a></li>
</ul>
</li>
<li><a href="removing.html">Removing Connections/Endpoints</a></li>
<li><a href="parameters.html">Connection &amp; Endpoint Parameters</a></li>
<li><a href="types.html">Connection &amp; Endpoint Types</a></li>
<li><a href="events.html">Events</a><ul>
<li><a href="interceptors.html">Interceptors</a></li>
</ul>
</li>
<li>Appearance<ul>
<li><a href="paint-styles.html">Styling via Paint Styles</a></li>
<li><a href="styling-via-css.html">Styling via CSS</a></li>
</ul>
</li>
<li><a href="querying.html">Querying jsPlumb</a></li>
<li><a href="animation.html">Animation</a></li>
<li><a href="utilities.html">Utility Functions</a></li>
<li><a href="loader-support.html">Loader Support (RequireJS)</a></li>
<li>Examples<ul>
<li><a href="connect-examples.html">jsPlumb.connect</a></li>
<li><a href="draggable-connections-examples.html">Draggable Connections</a></li>
<li><a href="miscellaneous-examples.html">Miscellaneous</a></li>
</ul>
</li>
<li>Development<ul>
<li><a href="development.html">Which files are which?</a></li>
<li><a href="Build.html">Building jsPlumb</a></li>
<li><a href="development-documentation.html">Documentation while developing</a></li>
</ul>
</li>
</ul>
                </div>
                <div class="markdown-body col-xs-9">
                    <h2>Zooming</h2>

<p>A fairly common requirement with the sorts of applications that use jsPlumb is the ability to zoom in and out.  As of release 1.5.0 there is a way to do this for browsers that support CSS3 (meaning, essentially, everything except IE &lt; 9).</p>

<p>Changing zoom requires that you do two things:</p>

<ol>
<li>Set a <code>transform</code> property on an appropriate container</li>
<li>Tell jsPlumb what the zoom level is.</li>
</ol>

<h4>Container</h4>

<p>You need to identify some element that is the parent of all of your nodes and the jsPlumb artefacts. This is probably fairly obvious. What you might not know about, though, is the <code>Container</code> concept in jsPlumb.  If you don&#39;t, I&#39;d encourage you to go and <a href="home#container">read this page</a> just quickly, because the best thing to do is to correctly configure a <code>Container</code> and then manipulate the <code>transform</code> property of that element.</p>

<p>Let&#39;s say we have some <code>div</code> whose id is <code>drawing</code>, and we&#39;re going to use that as the <code>Container</code>:</p>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">jsPlumb</span><span class="p">.</span><span class="nx">setContainer</span><span class="p">(</span><span class="s2">&quot;drawing&quot;</span><span class="p">);</span>
</code></pre></div>
<h4>CSS <code>transform</code> property</h4>

<p>Now to set the zoom to 0.75, say, we change the <code>transform</code> property accordingly. Remember that <code>transform</code> is one of those properties that have several vendor prefix versions, so there are several ways to do what I&#39;ve got here, and, given that you&#39;re probably a computer programmer, you&#39;ve most likely got a favourite.  But anyway, here&#39;s something.</p>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">$</span><span class="p">(</span><span class="s2">&quot;#drawing&quot;</span><span class="p">).</span><span class="nx">css</span><span class="p">({</span>
  <span class="s2">&quot;-webkit-transform&quot;</span><span class="o">:</span><span class="s2">&quot;scale(0.75)&quot;</span><span class="p">,</span>
  <span class="s2">&quot;-moz-transform&quot;</span><span class="o">:</span><span class="s2">&quot;scale(0.75)&quot;</span><span class="p">,</span>
  <span class="s2">&quot;-ms-transform&quot;</span><span class="o">:</span><span class="s2">&quot;scale(0.75)&quot;</span><span class="p">,</span>
  <span class="s2">&quot;-o-transform&quot;</span><span class="o">:</span><span class="s2">&quot;scale(0.75)&quot;</span><span class="p">,</span>
  <span class="s2">&quot;transform&quot;</span><span class="o">:</span><span class="s2">&quot;scale(0.75)&quot;</span>
<span class="p">});</span>
</code></pre></div>
<h4>jsPlumb.setZoom</h4>

<p>You now need to tell jsPlumb about the new zoom level:</p>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">jsPlumb</span><span class="p">.</span><span class="nx">setZoom</span><span class="p">(</span><span class="mf">0.75</span><span class="p">);</span>
</code></pre></div>
<h4>A Helper Function</h4>

<p>Maybe you&#39;d like to just grab this:</p>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nb">window</span><span class="p">.</span><span class="nx">setZoom</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">zoom</span><span class="p">,</span> <span class="nx">instance</span><span class="p">,</span> <span class="nx">transformOrigin</span><span class="p">,</span> <span class="nx">el</span><span class="p">)</span> <span class="p">{</span>
  <span class="nx">transformOrigin</span> <span class="o">=</span> <span class="nx">transformOrigin</span> <span class="o">||</span> <span class="p">[</span> <span class="mf">0.5</span><span class="p">,</span> <span class="mf">0.5</span> <span class="p">];</span>
  <span class="nx">instance</span> <span class="o">=</span> <span class="nx">instance</span> <span class="o">||</span> <span class="nx">jsPlumb</span><span class="p">;</span>
  <span class="nx">el</span> <span class="o">=</span> <span class="nx">el</span> <span class="o">||</span> <span class="nx">instance</span><span class="p">.</span><span class="nx">getContainer</span><span class="p">();</span>
  <span class="kd">var</span> <span class="nx">p</span> <span class="o">=</span> <span class="p">[</span> <span class="s2">&quot;webkit&quot;</span><span class="p">,</span> <span class="s2">&quot;moz&quot;</span><span class="p">,</span> <span class="s2">&quot;ms&quot;</span><span class="p">,</span> <span class="s2">&quot;o&quot;</span> <span class="p">],</span>
      <span class="nx">s</span> <span class="o">=</span> <span class="s2">&quot;scale(&quot;</span> <span class="o">+</span> <span class="nx">zoom</span> <span class="o">+</span> <span class="s2">&quot;)&quot;</span><span class="p">,</span>
      <span class="nx">oString</span> <span class="o">=</span> <span class="p">(</span><span class="nx">transformOrigin</span><span class="p">[</span><span class="mi">0</span><span class="p">]</span> <span class="o">*</span> <span class="mi">100</span><span class="p">)</span> <span class="o">+</span> <span class="s2">&quot;% &quot;</span> <span class="o">+</span> <span class="p">(</span><span class="nx">transformOrigin</span><span class="p">[</span><span class="mi">1</span><span class="p">]</span> <span class="o">*</span> <span class="mi">100</span><span class="p">)</span> <span class="o">+</span> <span class="s2">&quot;%&quot;</span><span class="p">;</span>

  <span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">i</span> <span class="o">&lt;</span> <span class="nx">p</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
    <span class="nx">el</span><span class="p">.</span><span class="nx">style</span><span class="p">[</span><span class="nx">p</span><span class="p">[</span><span class="nx">i</span><span class="p">]</span> <span class="o">+</span> <span class="s2">&quot;Transform&quot;</span><span class="p">]</span> <span class="o">=</span> <span class="nx">s</span><span class="p">;</span>
    <span class="nx">el</span><span class="p">.</span><span class="nx">style</span><span class="p">[</span><span class="nx">p</span><span class="p">[</span><span class="nx">i</span><span class="p">]</span> <span class="o">+</span> <span class="s2">&quot;TransformOrigin&quot;</span><span class="p">]</span> <span class="o">=</span> <span class="nx">oString</span><span class="p">;</span>
  <span class="p">}</span>

  <span class="nx">el</span><span class="p">.</span><span class="nx">style</span><span class="p">[</span><span class="s2">&quot;transform&quot;</span><span class="p">]</span> <span class="o">=</span> <span class="nx">s</span><span class="p">;</span>
  <span class="nx">el</span><span class="p">.</span><span class="nx">style</span><span class="p">[</span><span class="s2">&quot;transformOrigin&quot;</span><span class="p">]</span> <span class="o">=</span> <span class="nx">oString</span><span class="p">;</span>

  <span class="nx">instance</span><span class="p">.</span><span class="nx">setZoom</span><span class="p">(</span><span class="nx">zoom</span><span class="p">);</span>    
<span class="p">};</span>
</code></pre></div>
<p><strong>Notes</strong></p>

<ul>
<li><code>el</code> is a DOM element. You don&#39;t have to pass in <code>el</code>; if you do not, it uses the Container from the jsPlumb instance. </li>
<li><code>transformOrigin</code> is optional; it defaults to [0.5, 0.5] - the middle of the element (this is the browser default too)</li>
<li><code>instance</code> is an instance of jsPlumb - either <code>jsPlumb</code>, the static instance, or some instance you got through 
<code>jsPlumb.newInstance(...)</code>. The function will default to using the static instance of jsPlumb if you do not provide one.</li>
<li><code>zoom</code> is a decimal where 1 means 100%.</li>
</ul>

                </div>
            </div>
        </div>

        <script>
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
            m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

    ga('create', 'UA-49979015-1', 'auto');
    ga('send', 'pageview');

</script>


    </body>
</html>
